const path = require('path');
const HtmlWebpackPlugin  =  require("html-webpack-plugin");
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  entry: './src/main.ts',
  mode: "development",
  output: {
    path: path.resolve(__dirname, 'dist'),
  },
  devtool: "eval-cheap-module-source-map",
  devServer: {
    publicPath: '/',
    port: 8088,
    open: true,
    hot: true,
    quiet:true,
    compress: true,
    contentBase: path.resolve(__dirname, "../dist"),
    clientLogLevel: "none",
  },
  module: {
      rules: [
          {
            test: /\.(js)$/,
            exclude: /node_modules/,
            use: [{
                loader: "babel-loader",
                options : {
                    cacheDirectory : true
                }
            }]
          },
          {
            test: /\.vue$/,
            use: 'vue-loader'
          },
          {
            test: /\.tsx?$/,
            exclude: /node_modules/,
            use: [
              {
                  loader: 'ts-loader',
                  options: {
                      appendTsSuffixTo: [/\.vue$/],
                  }
              }
            ]
            
          },
          {
            test: /\.styl(us)?$/,
            use:[
              'style-loader',
              'css-loader',
              'stylus-loader'
            ]
          }
      ]
  },
  resolve : {
    extensions: [".js", ".vue", ".css", ".scss", ".json", ".ts", ".tsx"],
    alias : {
        "@" : path.resolve(__dirname,"../src")
    }
  },
  plugins: [
    new HtmlWebpackPlugin({
        filename : './index.html',
        template : './index.html',
    }),
    new VueLoaderPlugin(),
  ]
};